<template>

  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    :width="width"
    :visible="visible"
    @close="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="formDisabled">
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="施工进度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="showProgressValue">
                <div style="border: 1px solid lightgrey;border-radius: 5px">
                  <span style="margin-left: 15px">完成进度：{{model.showProgressValue}}%</span>
                  <van-slider
                    v-model="model.showProgressValue"
                    button-size="18"
                    style="width: 90%;margin: 20px auto;"  />
                </div>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="日志内容" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="content">
                <a-textarea v-model="model.content" placeholder="请填写施工日志内容" :rows="4" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="请选择上传图片或者视频" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-radio-group default-value="1" v-model="model.uploadResourceType" @change="changeUploadResourceType" button-style="solid">
                  <a-radio-button value="1">
                    图片
                  </a-radio-button>
                  <a-radio-button value="2">
                    视频
                  </a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item :label="currentUploadResourceType == 1 ? '日志图片':'日志视频'" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="progressId">
                <j-upload v-model="fileList" text="上传" fileType="image" v-show="currentUploadResourceType == 1"></j-upload>
                <j-video-upload v-model="fileList" text="上传" fileType="file" v-show="currentUploadResourceType == 2"></j-video-upload>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="业主可见" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-switch default-checked v-model="model.toShow" />
              </a-form-model-item>
            </a-col>

          </a-row>
        </a-form-model>
      </j-form-container>
    </a-spin>
    <a-row :gutter="24">
      <a-col :span="24">
        <a-button type="primary" style="width: 100%" @click="handleOk">保存</a-button>
      </a-col>
    </a-row>
  </a-drawer>
</template>

<script>
import {getFileAccessHttpUrl, httpAction, postAction} from '@/api/manage'

export default {
  name: "addProgressTemplate",
  components: {
  },
  data() {
    return {
      model: {
        showProgressValue: 0,
      },
      title: '',
      visible: false,
      width: "100%",
      fileList:[],
      customerId: 0,
      phone: '',
      progressId: 0,    //施工进度id
      taskId: 0,        //施工任务id
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
      confirmLoading: false,
      validatorRules: {
        showProgressValue: [{ required: true, message: '施工进度不能为空' }],
        content: [{ required: true, message: '日志内容不能为空' }],
      },
      marks: {
        0: '0%',
        100: '100%'
      },
      url: {
        addLog: "/ghConstructLog/add"
      },
      currentUploadResourceType: 1,
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {

  },
  methods: {
    add(record) {
      this.progressId = record.id;
      this.taskId = record.taskId;
      this.customerId = record.customerId;
      this.model.toShow = true;
      this.visible = true;
    },
    handleCancel() {
      this.visible = false;
      this.model = {};
      this.model.rate = 0;
      this.fileList = [];
    },
    handleOk() {
      const that = this;
      // 触发表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          let httpurl = '';
          let method = '';
          if (!this.model.id) {
            httpurl += this.url.addLog;
            method = 'post';
          }
          if (this.fileList.length > 0){
            this.model.images = this.fileList.toString();
          }
          if (this.model.uploadResourceType == null){
            this.model.uploadResourceType = 1;
          }
          this.model.customerId = this.customerId;
          this.model.phone = this.phone;
          that.model.rate = that.model.showProgressValue;
          this.model.progressId = this.progressId;
          this.model.taskId = this.taskId;
          httpAction(httpurl, this.model, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('addLogOk');
              this.model.rate = 0;
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            this.visible = false;
            this.model = {};
            this.fileList = [];
          })
        }
      })
    },
    changeUploadResourceType(item){
      this.currentUploadResourceType = item.target.value;
    },
  }
}
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width:104px;
  height:104px;
}
.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.ant-table-tbody .ant-table-row td{
  padding-top:10px;
  padding-bottom:10px;
}

.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}

/*【JTC-502】 添加用户两个滚动条*/
/deep/ .ant-drawer-body {
  padding-bottom: 53px;
}

</style>
